<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.active{
	border:5px solid red
}

.selected{
	background-color: #ddd
}

</style>

<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<h2 :class="{active:isActive}" v-on:click="sayHello('张三', $event)">Hello World</h2>
		
		<h2 :class="classList" @dblclick="print">v-bind 数组语法</h2>
		
		<!-- 延迟同步 -->
		<input v-model.lazy="name">
		<span>{{name}}</span>
		<hr>
		
		<!-- 光标跳出转成数字 -->
		<input v-model.number="age">
		<input type="number">
		<hr>
		
		<input v-model.trim="intro">
		<pre>"{{intro}}"</pre>
		<hr>
		
		<form action="课堂练习题1.html">
			用户名：<input>
			<!-- 表单中的提交按钮submit会触发表单的提交动作 -->
			<input type="submit" value="登录">
			<button>注册</button>
			<br>
			<input type="button" value="登录（普通按钮）">
			<button type="button">注册（普通按钮）</button>
		 	<br>
		 	<!-- .prevent 抑制默认行为 -->
		 	<input type="submit" @click.prevent="login" value="登录">
			<button>注册</button>
			<a href="课堂练习题1.html" @click.prevent="login">点击超链接执行js方法</a>
			
		</form>
		
		<h1> v-if </h1>
		<img v-if="gender=='女'" src="../products/1/cs10001.jpg" style="height: 100px">
		<img v-else-if="gender=='男'" src="../products/1/cs60007.png" style="height: 100px">
		<img v-else src="../products/1/cs60008.png" style="height: 100px">
		<br>
		<img v-show="gender=='女'" src="../products/1/cs10001.jpg" style="height: 100px">
		<img v-show="gender=='男'" src="../products/1/cs60007.png" style="height: 100px">
		<img v-show="gender!='男' && gender!='女'" src="../products/1/cs60008.png" style="height: 100px">
		
		<h2>坑</h2>
		<input v-if="gender=='女'" key="girl">
		<input v-else-if="gender=='男'" key="boy">
		
		
		<h1> v-for (循环对象属性)</h1>
		<ol>
			<li v-for=" o in person" v-text="o">
		</ol>
		
		<ul>
			<li v-for=" (o,name) in person">{{o}} : {{name}}</li>
		</ul>
		
		<ul>
			<li v-for=" (o,name, index) in person" :id="'li_'+index">{{o}} : {{name}} : {{index}}</li>
		</ul>
		
		
		
	</div>
	<script type="text/javascript">
	var v = new Vue({
		el : "#app",
		data : {
			isActive : true,
			classList: ['active','selected'],
			name: "张三",
			age : 16,
			intro: "",
			gender: "女",
			person : {
				name : "武松",
				gender : "男",
				age : 28,
				job : "都头"
			}
		},
		methods: {
			sayHello : function( name, e){
				console.info(window.event.srcElement);
				console.info(e);
				console.info(window.event);
				alert("hello，" + name);
			},
			print(){
				alert(event.srcElement.innerText);
			},
			login(){
				alert("登录")
			}
			
		},
		
		/** vue 声明周期钩子函数 */
		beforeCreate(){
			// alert("beforeCreate");
		},
		// 创建 vue 对象之后， 渲染之前
		created(){
			console.info("created    "+li_0.innerText)
		},
		mounted(){
			console.info("mounted    "+li_0.innerText)
		},
		updated(){
			console.info("updated    "+li_0.innerText)
		}
		
		
	})
	
	
	
	</script>
	

</body>
</html>